<template lang='pug'>
  div.d-flex.justify-content-end
    .toolbar.d-flex.align-items-center.m-r-5
      //- 切换筛选草稿和发布
      el-checkbox-group.tool-checkBox(v-model='checkStatus' :min="1")
        el-checkbox(v-for="(item, index) in statusList" :key="index" :label="item.value") {{item.label}}
      a.play-wrap(@click="autoPlayList(!autoPlay)")
        el-tooltip(effect="dark" :content="isRejestAutoPlay?'当前状态不允许播放':autoPlay?'停止播放':'播放'" placement="bottom")
          i.iconfont.outline(
            :class="autoPlay ? 'icon-stop' : 'icon-play'"
            :style="{color: isRejestAutoPlay?'#e6e6e6':'#5EACF8'}")
    .step-list-box
      //- 左播放(v-show="actIndex!=0||autoPlay")
      .left-wrap
        a.m-t-10.m-b-10(@click="transPre",v-show="startIndex!==0||autoPlay")
          i.iconfont.icon-angle-left
      .content-wrap(:style="stepContentWidth")
        .history-list(
          v-for="(cell, index) in sliceStep"
          :key="`list${index}`")
          //- `${cell.name || ''}${cell.remark?'-'cell.remark:''}`
          el-tooltip(
            effect="dark"
            :content="cell.status|filterStatus(cell.enabled)|filterContent(cell.name, cell.remark)"
            :enterable="false"
            :offset="-5"
            placement="bottom-start")
            .step-item.cursor(@click="selectStep(cell)")
              .point(:class="[{'point-publish': cell.status === 'RELEASE' && cell.enabled === true}, {'point-active': cell.id === activeId}, {'point-unuse': cell.status === 'RELEASE'}]")
              p {{cell.name}}
      //- (v-show="endIndex!=stepList.length||autoPlay")
      .right-wrap
        a.m-t-10.m-b-10(@click="transNext",v-show="endIndex!=stepList.length||autoPlay")
          i.iconfont.icon-angle-right
</template>

<script>
/**
 * @name 分区管理-历史进度条
 * @author linmn
 */
import { cloneDeep } from 'lodash'
export default {
  name: 'SimpleStep',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    initIndex: {
      type: Number,
      default: 5
    },
    current: {
      type: Number,
      default: null
    },
    isRejestAutoPlay: {
      type: Boolean,
      default: false
    } // 拒绝自动播放
  },
  watch: {
    list (val) {
      this.filterStatusList()
    },
    current (val) {
      this.activeId = val
    },
    // autoPlay (play) { // 是否自动播放
    //   this.autoPlayList(play)
    // },
    checkStatus () {
      this.filterStatusList()
    }
  },
  computed: {
    stepContentWidth () {
      return {
        'width': this.initIndex * 80 + 20 + 'px'
      }
    },
    /* 截取默认显示的列表 */
    sliceStep () {
      const list = cloneDeep(this.stepList)
      const iIndex = this.initIndex
      const step = this.stepList.length > iIndex
        ? list.slice(this.startIndex, this.endIndex)
        : this.stepList
      // console.log('sliceStep:', step)
      // return step.reverse()
      // return step.sort((a, b) => { return a - b < 0 })
      return step
    },
    activeId: {
      set (val) {
        this.tempActId = val
      },
      get () {
        return this.tempActId
      }
    },
    actIndex () {
      return this.stepList.findIndex(step => step.id === this.activeId)
    }
  },
  filters: {
    filterStatus (status, enabled) {
      return enabled
        ? '【当前版本】'
        : status === 'RELEASE' ? '【已发布】' : '【草稿】'
    },
    filterContent (status, name, remark) {
      return `${status}${name}${remark ? ' - ' + remark : ''}`
    }
  },
  data () {
    const list = this.list
    const curIndex = this.list.findIndex(step => step.id === this.current)
    return {
      stepList: list,
      startIndex:
        curIndex - this.initIndex >= 0 ? curIndex - this.initIndex + 1 : 0, // 控制筛选显示起点
      endIndex: curIndex - this.initIndex >= 0 ? curIndex + 1 : this.initIndex, // 控制筛选显示终点
      tempActId: cloneDeep(this.current), // 默认活动节点为传入的节点
      timer: null,
      autoPlay: false, // 自动播放
      checkStatus: ['DRAFF', 'RELEASE'], // 选择显示的状态
      statusList: [
        {
          label: '草稿',
          value: 'DRAFF'
        },
        {
          label: '发布',
          value: 'RELEASE'
        }
      ],
      tipInfo: ''
    }
  },
  methods: {
    // 筛选状态,根据状态显示列表
    filterStatusList () {
      const initList = cloneDeep(this.list)
      let list = []
      if (this.checkStatus.length === 2) {
        // 重新回到默认状态
        this.$set(this, 'stepList', initList)
        return
      }
      this.checkStatus.map(key => {
        list.push(...initList.filter(step => step.status === key))
      })
      this.$set(this, 'stepList', list)
      // TODO 非要返回默认
      // console.log('isExt-1:', this.sliceStep, this.actIndex)
      // this.$nextTick(() => {
      //   const isExt = this.sliceStep[this.actIndex]
      //   console.log('isExt:', this.sliceStep, this.actIndex)
      //   isExt ? this.selectStep(isExt) : this.initStepSort()
      // })
    },
    // 切换之前版本
    transPre () {
      const beforeIndex = this.sliceStep.findIndex(
        list => list.id === this.activeId
      )
      const lens = this.stepList.length
      // 索引
      let tempIndex =
        beforeIndex - 1 < 0
          ? !this.actIndex ? this.sliceStep.length - 1 : beforeIndex
          : beforeIndex - 1 // 索引自动循环到最后一个
      // 改变显示条start-end
      if (this.actIndex === 0) {
        // 当前已经到所有数据的第一条
        this.startIndex = lens - this.initIndex
        this.endIndex = lens
      } else if (this.actIndex === this.startIndex) {
        // 当前已到显示条第一条
        this.startIndex = this.startIndex - 1
        this.endIndex = this.endIndex - 1
      }
      this.selectStep(this.sliceStep[tempIndex])
    },
    // 切换之后版本
    transNext () {
      // 修改sliceStep的开始、结束节点
      const sliceIndex = this.sliceStep.findIndex(
        list => list.id === this.activeId
      ) // 在slice中的显示的位置，用于判断是否到最尾
      const lens = this.stepList.length
      const sliceLen = this.sliceStep.length
      // 已经在显示的最后一个的，只需要切换start和end，索引不变
      if (sliceIndex + 1 === sliceLen) {
        // 切换start和end显示出点
        if (this.endIndex < lens) {
          // 未到全部list的最后
          // 切换历史条展示隐藏部分
          const tempIndex = sliceIndex
          this.startIndex = this.startIndex + 1
          this.endIndex = this.endIndex + 1
          this.selectStep(this.sliceStep[tempIndex])
          return
        }
        // 已到全部的最后
        this.initStepSort()
        return
      }
      const tempIndex = sliceIndex + 1
      this.selectStep(this.sliceStep[tempIndex]) // 切换版本
    },
    // 选择版本
    selectStep (step) {
      if (!step) return
      this.activeId = step.id
      this.$emit('selectStep', step)
    },
    // 重置顺序
    initStepSort () {
      this.startIndex = 0
      this.endIndex = this.initIndex
      this.selectStep(this.stepList[0])
    },
    // 自动播放
    autoPlayList (isPlay) {
      if (this.isRejestAutoPlay) return
      this.autoPlay = isPlay
      this.$emit('autoPlaying', isPlay)
      if (!isPlay) {
        clearTimeout(this.timer)
        return
      }
      this.transNext()
      this.timer = setTimeout(() => {
        this.autoPlayList(true)
      }, 3000)
    },
    // 跳至最后
    turnToLastStep () {
      this.endIndex = this.stepList.length
      this.startIndex = this.endIndex - this.initIndex
      this.selectStep(this.stepList[this.endIndex - 1])
    },
    // 删除之后跳转到之前版本
    deleteStep () {}
    // // 插入新数据在当前状态的列表中
    // insertToStep (obj) {
    // }
  }
}
</script>

<style lang='sass' scoped>
$default-col: #5EACF8
.toolbar:focus, a:focus
  outline: none
.tool-checkBox
  max-width: 60px
  line-height: 20px
  .el-checkbox
    margin: 0
.play-wrap
  cursor: pointer
  i
    font-size: 28px
    color: $default-col
.step-list-box
  display: flex
  align-items: center
  a
    cursor: pointer
    padding: 5px 10px
    &:hover
      background: rgba(223, 223, 223, 0.25)
  // 内容模块
  .content-wrap
    flex: 1
    // text-align: center
    clear: both
    padding: 10px 10px 0
    .history-list
      max-width: 80px
      width: 80px
      display: inline-block
      p
        font-size: 14px
        // min-width: 50px
        max-width: 80px
        overflow: hidden
        white-space: nowrap
        text-overflow: ellipsis
      &:last-child
        width: auto
      .step-item
        &:focus
          outline: none
    .point
      position: relative
      border: 3px solid #dfdfdf
      // background: rgba(253, 253, 253, .4)
      border-radius: 50%
      width: 15px
      height: 15px
    // .history-list:not(:first-child)
    //   .step-item
    //     position: relative
    //     border: 0
    //     &:after
    //       content: ''
    //       position: absolute
    //       right: 5px
    //       width: 76px
    //       top: 6px
    //       height: 3px
    //       /* border-radius: 5px */
    //       background: #606266
    .history-list:not(:last-child)
      .step-item
        position: relative
        border: 0
        &:after
          content: ''
          position: absolute
          right: 5px
          width: 56px
          top: 6px
          height: 3px
          background: #606266
    .point-active
      background: #eb4c42
      // border-color: #b31b1b
    .point-publish
      // background: #eb4c42
      border-radius: 0
      border-color: $default-col
      transform: rotate(45deg)
      &:before
        transform: rotate(-45deg)
    .point-unuse
      border-color: $default-col
.outline
  outline: inherit
</style>
